Tlo obrazkowe

selektor { background-image: url(¶ciezka dostepu do obrazka) }
Polecenie pozwala wstawic dowolny obrazek jako tlo pod elementem. Pamietaj jednak, zeby obrazek w tle nie byl zbyt jaskrawy. Spowoduje to tylko zaciemnienie zawarto¶ci strony i utrudni czytanie.


Tlo obrazkowe

selektor { background-repeat: powtarzanie }
Natomiast jako "powtarzanie" nalezy wpisac:
repeat - powtarzanie tla w obu kierunkach (domy¶lnie)
repeat-x - powtarzanie tla tylko w kierunku poziomym
repeat-y - powtarzanie tla tylko w kierunku pionowym
no-repeat - brak powtarzania tla (zostanie wy¶wietlone jako pojedynczy obrazek)
space - przestrzen pomiedzy obrazkami w tle zostanie dobrana w taki sposob, aby zadna grafika nie byla przycieta (CSS 3 - MSIE 9, Opera)
round - wymiary obrazka w tle zostan± dopasowane w taki sposob, aby zadna grafika nie byla przycieta (CSS 3 - MSIE 9, Opera)


Tlo obrazkowe bez powtarzania

Polecenie pozwala zdefiniowac sposob powtarzania sie obrazka w tle obrazkowym. Normalnie kopie obrazka s± ustawiane obok siebie tak, ze zajmuj± caly obszar tla. Ale mozliwe jest rowniez zdefiniowanie powtarzania w poziomie czy w pionie lub calkowite zablokowanie.


Tlo obrazkowe rozmieszczenie rownomiernie w poziomie: space

Polecenie pozwala zdefiniowac sposob powtarzania sie obrazka w tle obrazkowym. Normalnie kopie obrazka s± ustawiane obok siebie tak, ze zajmuj± caly obszar tla. Ale mozliwe jest rowniez zdefiniowanie powtarzania w poziomie czy w pionie lub calkowite zablokowanie.


Tlo obrazkowe Pozycja

selektor { background-position: pozycja }
Natomiast jako "pozycja" nalezy wpisac:
Jedn± warto¶c:
center - obrazek na ¶rodku (w centrum)
left - obrazek po lewej
right - po prawej
top - na gorze
bottom - na dole
jednostka dlugo¶ci - odleglo¶c od lewej krawedzi
Dwie warto¶ci (oddzielone spacj±):
left top - lewy-gorny rog
left bottom - lewy-dolny rog
right top - prawy-gorny rog
right bottom - prawy-dolny rog
dwie jednostki dlugosci, z ktorych pierwsza oznacza odleglo¶c od lewej krawedzi, a druga - od gornej


Zaczepienie (Tło ruchome i nieruchome)

selektor { background-attachment: zaczepienie }
Jako "zaczepienie" nalezy wpisac:
scroll - przewijanie tla (domyslnie)
fixed - tlo nieruchome wzgledem okna przegladarki
local - tlo nieruchome wzgledem elementu (jesli posiada on suwaki), ale przewijane wzgledem okna przegladarki (CSS 3 - MSIE 8, ale nie 9.0; Firefox)


Przycinanie

selektor { background-clip: przycinanie }
Selektorem moze byc praktycznie dowolny znacznik, np. p - akapit, h1 - tytul czy td - komorka tabeli [zobacz: Wstawianie stylow].
Natomiast jako "przycinanie" nalezy wpisac:
border-box - tlo wyswietli sie pod obramowaniem, marginesem wewnetrznym i wlasciwa zawartoscia elementu (domyslnie) [Zobacz: Model pudelkowy]
padding-box - tlo wyswietli sie pod marginesem wewnetrznych i wlasciwa zawartoscia elementu
content-box - tlo wyswietli sie tylko pod wlasciwa zawartoscia elementu
Mozliwe jest rowniez okreslenie kilku wartosci przycinania - kiedy wstawiamy w tle wiecej niz jeden obrazek:


Pozycja poczatkowa

selektor { background-origin: poczatek }
Selektorem moze byc praktycznie dowolny znacznik, np. p - akapit, h1 - tytul czy td - komorka tabeli [zobacz: Wstawianie stylow].
Natomiast jako "poczatek" nalezy wpisac: border-box - pozycja tla bedzie liczona wzgledem krawedzi obramowania [Zobacz: Model pudelkowy]
padding-box - pozycja tla bedzie liczona wzgledem krawedzi marginesu wewnetrznego (domyslnie)
content-box - pozycja tla bedzie liczona wzgledem krawedzi wlasciwej zawartosci elementu
Zgodnie z komputerowym ukladem wspolrzednych punkt zerowy znajduje sie zawsze w lewym-gornym narozniku. W przypadku modelu pudelkowego mozemy miec jednak az trzy takie narozniki - dla roznych obszarow wewnatrz elementu. Ustalenie polozenia poczatkowego okazuje sie szczegolnie przydatne, jesli korzystamy rowniez z przycinania tla.
Mozliwe jest rowniez okreslenie kilku wartosci pozycji poczatkowej - kiedy wstawiamy w tle wiecej niz jeden obrazek:


Rozmiary

selektor { background-size: rozmiary }
Selektorem moze byc praktycznie dowolny znacznik, np. p - akapit, h1 - tytul czy td - komorka tabeli [zobacz: Wstawianie stylow].
Natomiast jako "rozmiary" nalezy wpisac:
contain - skaluje obrazek, zachowujac proporcje, tak aby w calosci zmiescil sie w tle
cover - skaluje obrazek, zachowujac proporcje, tak aby pokryl caly obszar tla (czesc grafiki moze byc niewidoczna)
auto - zachowanie domyslne
dlugosc - obrazek zostanie przeskalowany do podanego wymiaru
wartosc procentowa - obrazek zostanie przeskalowany wzgledem obszaru pozycjonowania tla


Daniel Zygmunt 2c